<template>
	<div id="app">
		<div class="title">用户提现</div>
		<el-row class="tableBtnTop">
			<el-select v-model="type" placeholder="请选择" class="filter">
				<el-option :key="index" v-for="(item, index) in searchOptions" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<div class="search">
				<el-input @keyup.enter.native="onSearch" v-model.trim="keyword" placeholder="请输入内容">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
		</el-row>
		<el-table :data="tableData" @filter-change="filterChange" border v-loading="loading">
			<el-table-column prop="user" label="用户" :show-overflow-tooltip="true" min-width="110">
				<template slot-scope="scope">
					<div class="userHead" @click="$router.push(`/user/detail/${scope.row.user_id}`)">
						<img :src="scope.row.avatar" class="square" />
						{{scope.row.nick_name}}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="money" label="金额" :show-overflow-tooltip="true" min-width="70">
				<template slot-scope="scope">
					<font color="#F30">{{scope.row.money | transPrice}}</font>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="收款账号" :show-overflow-tooltip="true" min-width="110">
				<template slot-scope="scope">
          {{scope.row.type==1?"支付宝：" + scope.row.alipay_name + " " + scope.row.alipay_account:"微信：" + scope.row.wecaht_name}}
				</template>
			</el-table-column>
			<el-table-column prop="time" label="申请时间" :show-overflow-tooltip="true" min-width="100">
				<template slot-scope="scope">
					{{scope.row.created_time | dateFormat}}
				</template>
			</el-table-column>
			<el-table-column prop="admin_id" label="打款人">
				<template slot-scope="scope">
					<template v-if="scope.row.withdrawa_time != 0">
						<el-tooltip>
							<div v-text="scope.row.admin_id" class="ell"></div>
							<div slot="content">
								打款人：{{scope.row.admin_id || '-'}}<br/><br/>
								打款时间：{{scope.row.withdrawa_time | dateFormat}}
							</div>
						</el-tooltip>
					</template>
					<template v-else>
						-
					</template>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" :show-overflow-tooltip="true" :filters="statusFilter" :filtered-value="status == '' || status == undefined ? [] : status.split(',').map(Number)" column-key="status" min-width="70">
				<template slot-scope="scope">
					<font v-if="scope.row.status==0" class="gray">等待处理</font>
					<font v-if="scope.row.status==1" class="green">已打款</font>
					<font v-if="scope.row.status==2" class="red">拒绝打款</font>
				</template>
			</el-table-column>
			<el-table-column prop="comment" label="备注风控" min-width="130">
				<template slot-scope="scope">
					<el-tooltip>
						<div v-text="scope.row.comment || '-'" class="ell"></div>
						<div slot="content">
							风控：{{scope.row.safe_remark || '-'}}<br/><br/>
							备注：{{scope.row.comment || '-'}}
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div class="tableBtn">
						<template v-if="scope.row.status==0 && !scope.row.btnLoad"><a @click="getCashDetail(scope.$index)">处理</a></template>
						<template v-else-if="scope.row.status==0 && scope.row.btnLoad">处理中...</template>
						<template v-else>-</template>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<div class="paginationBlock">
				<el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
		</div>


		<el-dialog title="提示" :visible.sync="handleShow" @close="onUnlock" width="500px">
			<el-form label-position="top">
        <!--template slot-scope="scope">
          {{scope.row.type==1?"支付宝：" + scope.row.alipay_name + " " + scope.row.alipay_account:"微信：" + scope.row.wecaht_name}}
        </template-->
					<el-form-item label="打款金额"><font color="#F30">{{cashDetail.money | transPrice(2)}}元</font>（已去掉{{cashDetail.money_service | transPrice(2)}}元手续费）</el-form-item>
					<el-form-item label="处理">
            {{payType}}{{remark}}
								<el-radio-group v-model="payType" @change="remark=remarks[payType]" style="margin-bottom:15px;">
										<el-radio :value="1" :label="1">自动打款</el-radio>
										<el-radio :value="2" :label="2">拒绝打款</el-radio>
										<el-radio :value="3" :label="3">已手动打款</el-radio>
								</el-radio-group>
							<el-input v-model.trim="remark"></el-input>
					</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onWithdrawal" :loading="btnloading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import fetch from '@/api/axios';
import {sysToYuan} from '@/utils/transPrice';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
export default {
	data() {
		return {
			loading: false,
			btnloading: false,
			page: 1,
			pageSize: 10,
			count: 0,

			searchOptions: [
				{label: '用户昵称', value: 'user_name'},
				{label: '用户ID', value: 'user_id'},
				{label: '提现ID', value: 'cash_id'},
				{label: '手机号码', value: 'user_tel'},
				{label: '收款账号', value: 'account_id'},
				{label: '收款姓名', value: 'alipay_name'},
			],
			type: 'user_name',
			keyword: '',
			statusFilter:[
				{text: "等待处理",value: 0},
				{text: "已打款",value: 1},
				{text: "拒绝打款",value: 2},
			],
			// status: '',
			tableData:[],

			handleShow:false,
			curItemIndex: 0,
			cashDetail: {},

			remarks: ['','恭喜您，提现申请已处理，资金已经打款，请注意查收。', '很遗憾的通知您，本次提现申请失败。', '恭喜您，提现申请已经处理，资金已手动打款。'],
			status: '',
			remark: '',
      payType: 2

		}
	},
	filters: {
		transPrice(p){
			return sysToYuan(p, 2);
		},
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
	created(){
		this.init();
	},
	methods: {
		init() {
			this.page = parseInt(this.$route.query.page || 1);
			if(this.$route.query.type){
				this.type = this.$route.query.type;
			}
			this.keyword = this.$route.query.keyword;
			let status = this.$route.query.status;
			this.status = typeof status === 'undefined' ? '' : status;
			this.getList();
		},
		onSearch(){
			let page = 1;
			let type = this.type;
			let keyword = this.keyword;
			let status = this.status;
			let searchStr = '';
			let statusStr = '';
			if(type && keyword){
				searchStr = `&type=${type}&keyword=${keyword}`;
			}
			if(status.length){
				statusStr = `status=${status}&`;
			}
			this.page = page;
			this.getList();
			this.$router.push(`/capital/cash?${statusStr}page=${page}${searchStr}`);

		},
		filterChange(value) {
			let status = value.status.join(',');
			let page = 1;
			let type = this.type;
			let keyword = this.keyword;
			let searchStr = '';
			let statusStr = '';
			if(type && keyword){
				searchStr = `&type=${type}&keyword=${keyword}`;
			}
			if(status.length){
				statusStr = `status=${status}&`;
			}
			this.page = page;
			this.status = status;
			this.getList();
			this.$router.push(`/capital/cash?${statusStr}page=${page}${searchStr}`);
        },
		getList(){
			let _this = this;
			let type = this.keyword ? this.type : undefined;
			this.loading = true;
			fetch.get('/api/console/user/withdrawal',{
				page: _this.page,
				type: type,
				keyword: _this.keyword,
				status: _this.status == '' ? undefined : _this.status,
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.result];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		changePage(page){
			let type = this.type;
			let keyword = this.keyword;
			let status = this.status;
			let typeStr = !type || !keyword ? '' : `&${type}=${keyword}`;
			let statusStr = '';
			if(status == '' || status == undefined){
				statusStr = `status=${status}&`;
			}
			this.page = page;
			this.$router.replace(`/capital/cash?${statusStr}page=${page}${typeStr}`);
			this.getList();
		},
		getCashDetail(index){
			let _this = this;
			let id = this.tableData[index].id;
			this.curItemIndex = index;

			// 锁定
			this.onLock(index);
			fetch.get('/api/console/user/cash/detail',{
				cash_id: id
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.cashDetail = res.data.data;
					_this.handleShow = true;
				}else{
					_this.$message.error(data.message);
				}
			}).catch(err=>{
				_this.$message.error(err);
			});
		},
		onCancel(){
			this.onUnlock();
		},
		onLock(index){
			let _this = this;
			let id = this.tableData[index].id;

			// 锁定
			fetch.get('/api/console/task/operate/lock',{
				id: id,
				action: 'lock',
				table: 'cash'
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					this.$set(this.tableData[index], 'btnLoad', true);
				}
			}).catch((err)=>{
				//
			});
		},
		onUnlock(){
			let _this = this;
			let index = this.curItemIndex;
			let id = this.tableData[index].id;
			_this.handleShow = false;

			// 解锁
			fetch.get('/api/console/task/operate/lock',{
				id: id,
				action: 'unlock',
				table: 'cash'
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.$set(_this.tableData[index], 'btnLoad', false);
				}
			}).catch((err)=>{
				//
			}).finally(()=>{
				_this.curItemIndex = 0;
				_this.$set(_this.tableData[index], 'btnLoad', false);
			});
		},
		onWithdrawal(){
			let _this = this;
			let index = this.curItemIndex;
			let id = this.tableData[index].id;
			let user_id = this.tableData[index].user_id;

			if(this.btnloading){
				return false;
			}

			this.btnloading = true;
			fetch.post('/api/console/user/withdrawal',{
				status: _this.payType,
				tran_id: id,
				user_id: user_id,
				remark: _this.remark
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.onUnlock();
					_this.handleShow = false;
					_this.$set(_this.tableData[index], 'status', parseInt(_this.status));
					_this.curItemIndex = 0;
					let badge = {..._this.$store.getters.badge};
					badge.cash = badge.cash - 1;
					_this.$store.commit('updateBadge', badge);
					_this.init();
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error('网络错误，请稍后重试');
			}).finally(()=>{
				_this.btnloading = false;
			});
		},
	},
	mounted() {
    this.remark = this.remarks[this.payType]
	},
	watch: {
		'$route':function(to){
			let query = to.query;
			this.page = parseInt(query.page);
			if(query.type){
				this.type = query.type
			}
			this.keyword = query.keyword || '';
		}
	}
}
</script>
<style lang="scss" scoped>
	.title{
		margin-bottom:25px;
		font-size:21px;
		margin-top:65px;
	}
	.admin_id{
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		position: relative;
	}
</style>
